<template>
  <div class="app-container">
    <el-form ref="dataForm" :model="dataForm" status-icon label-width="300px">
      <el-form-item v-for="(item, index) in dataForm.amountRange" :label="$t('面额')">
        <el-col :span="4">
          <el-input type="number" class="numberInput" v-model="dataForm.amountRange[index]"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="addAmountRange">{{ $t('Add') }}</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="warning" size="mini" @click="deleteAmountRange(index)">{{ $t('删除') }}</el-button>
        </el-col>
      </el-form-item>
    </el-form>
    <div align="center">{{ $t('说明：此配置为配置ipad用户下班结算时的面额配置') }}</div>
    <div class="dialog-footer" style="margin-left:450px;">
      <el-button type="primary" @click="addSettlement" icon="el-icon-plus">{{ $t('Add') }}</el-button>
      <el-button type="primary" @click="handleUpdate">{{ $t('Confirm') }}</el-button>
    </div>
  </div>
</template>

<script>
import { listSettlement, updateSettlement } from "@/api/config";
export default {
  name: "configSettlement",
  data() {
    return {
      dataForm: {
        amountRange: []
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    addSettlement() {
      this.dataForm.amountRange.push(0);
    },
    init: function () {
      listSettlement().then(response => {
        let tmp = response.data.data.litemall_settlement_amount;
        if (tmp) {
          let arr = tmp.split(';')
          arr.forEach(data => {
            this.dataForm.amountRange.push(data);
          })
          this.dataForm.amountRange = this._.sortBy(this.dataForm.amountRange, function (o) {
            return Number(o.amount)
          })
        }
      })
    },
    addAmountRange() {
      this.dataForm.amountRange.push(1)
    },
    deleteAmountRange(index) {
      this.dataForm.amountRange.splice(index, 1)
    },
    handleUpdate() {
      const err = this.dataForm.amountRange.findIndex(item => {
        return item == '0'
      })
      if (err != -1) {
        this.$notify.error({
          title: this.$t('error!'),
          message: this.$t('值不能为0')
        })
        return;
      }
      let body = this.dataForm.amountRange.join(';')
      updateSettlement({ litemall_settlement_amount: body })
        .then(response => {
          this.$notify.success({
            title: this.$t('Success!'),
            message: this.$t('修改成功')
          })
        })
        .catch(response => {
          this.$notify.error({
            title: this.$t('Failed'),
            message: this.$t(response.data.errmsg)
          })
        })
    }
  }
}
</script>

<style scoped>
.numberInput /deep/ input::-webkit-inner-spin-button,
.numberInput /deep/ input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

.numberInput /deep/ input[type="number"] {
  -moz-appearance: textfield;
}
</style>
